.notFoundRow {
  justify-content: center;
  gap: 48px;
  margin-top: 60px;
  align-items: center;
  img {
    margin: 0;
  }
  > div {
    height: min-content;
  }
  @media (min-width: 768px) {
    margin-top: 30px;
  }
}

.hero__title {
  font-family: Barlow, system-ui, Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 2.5rem;
  line-height: 48px;
  letter-spacing: -0.8px;
}

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

$bg-color: var(--ifm-background-color);
$glitch-bg-color: $bg-color;

.heroRoot {
  display: block;
  font-size: 3em;
  margin: 0.6em 0;
  font-weight: bold;
  font-family: "Press Start 2P", cursive;
  color: var(--notfound-glitchColor);
  font-size: 4rem;
  text-align: center;
  background-color: $bg-color;
  margin-bottom: 65px;
  display: flex;
  margin-top: 0;
  align-items: center;
  justify-content: center;
  @media (min-width: 768px) {
    margin-bottom: 44px;
    font-size: 6.2rem;
  }
}

.glitch {
  position: relative;
  margin: 0 auto;
  background: $glitch-bg-color;
}

.glitch::before,
.glitch::after {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
  overflow: hidden;
  position: absolute;
  top: 0;
  clip: rect(0, 900px, 0, 0);
  content: attr(data-text);
}

.glitch::after {
  animation-name: glitch-animation;
  animation-duration: 4s;
  left: 4px;
  text-shadow: -1px 0 #f6ad55;
  background: $glitch-bg-color;
}

.glitch::before {
  animation-name: glitch-animation-2;
  animation-duration: 6s;
  left: -4px;
  text-shadow: 1px 0 #00d8ff;
  background: $glitch-bg-color;
}

@mixin rect($top, $bottom) {
  clip: rect($top, 9999px, $bottom, 0);
}

/* Expanded Animations */
@keyframes glitch-animation {
  0% {
    @include rect(42px, 44px);
  }
  5% {
    @include rect(12px, 59px);
  }
  10% {
    @include rect(48px, 29px);
  }
  15.0% {
    @include rect(42px, 73px);
  }
  20% {
    @include rect(63px, 27px);
  }
  25% {
    @include rect(34px, 55px);
  }
  30.0% {
    @include rect(86px, 73px);
  }
  35% {
    @include rect(20px, 20px);
  }
  40% {
    @include rect(26px, 60px);
  }
  45% {
    @include rect(25px, 66px);
  }
  50% {
    @include rect(57px, 98px);
  }
  55.0% {
    @include rect(5px, 46px);
  }
  60.0% {
    @include rect(82px, 31px);
  }
  65% {
    @include rect(54px, 27px);
  }
  70% {
    @include rect(28px, 99px);
  }
  75% {
    @include rect(45px, 69px);
  }
  80% {
    @include rect(23px, 85px);
  }
  85.0% {
    @include rect(54px, 84px);
  }
  90% {
    @include rect(45px, 47px);
  }
  95% {
    @include rect(37px, 20px);
  }
  100% {
    @include rect(4px, 91px);
  }
}

@keyframes glitch-animation-2 {
  0% {
    @include rect(65px, 100px);
  }
  5% {
    @include rect(52px, 74px);
  }
  10% {
    @include rect(79px, 85px);
  }
  15.0% {
    @include rect(75px, 5px);
  }
  20% {
    @include rect(67px, 61px);
  }
  25% {
    @include rect(14px, 79px);
  }
  30.0% {
    @include rect(1px, 66px);
  }
  35% {
    @include rect(86px, 30px);
  }
  40% {
    @include rect(23px, 98px);
  }
  45% {
    @include rect(85px, 72px);
  }
  50% {
    @include rect(71px, 75px);
  }
  55.0% {
    @include rect(2px, 48px);
  }
  60.0% {
    @include rect(30px, 16px);
  }
  65% {
    @include rect(59px, 50px);
  }
  70% {
    @include rect(41px, 62px);
  }
  75% {
    @include rect(2px, 82px);
  }
  80% {
    @include rect(47px, 73px);
  }
  85.0% {
    @include rect(3px, 27px);
  }
  90% {
    @include rect(26px, 55px);
  }
  95% {
    @include rect(42px, 97px);
  }
  100% {
    @include rect(38px, 49px);
  }
}

:root[data-theme="light"] {
  --notfound-background: #ffffff;
  --notfound-codeColor: #4a5568;
  --notfound-codeBg: #edf2f7;
  --notfound-codeTitle: #718096;
  --notfound-disabled: #cbd5e0;
  --notfound-primary: #2d3748;
  --notfound-glitchColor: #5a67d8;
}
:root[data-theme="dark"] {
  --notfound-background: #090a15;
  --notfound-codeColor: #e2e8f0;
  --notfound-codeBg: #1a202c;
  --notfound-codeTitle: #a0aec0;
  --notfound-disabled: #4a5568;
  --notfound-primary: white;
  --notfound-glitchColor: #a3bffa;
}

.container {
  margin: auto;
  width: 100vw;
  position: relative;
  padding: 0 10px;
  margin-top: -64px;
  padding-top: 97px;
  overflow: hidden;
  @media (min-width: 940px) {
    padding: 64px 1.5rem 0 1.5rem;
    width: 100%;
    margin-top: -64px;
    max-width: 1248px;
  }
}

.wrapper {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - 177px);
  @media (min-width: 466px) {
    height: calc(100vh - 153px);
  }
  @media (min-width: 940px) {
    height: calc(100vh - 120px);
  }
}

.description {
  max-width: 100%;
  width: fit-content;
  padding: 24px 16px;
  border-radius: 8px;
  background: var(--notfound-codeBg);
  margin: 0 auto 3rem auto;
  line-height: 28px;
  font-size: 18px;
  font-family: "JetBrainsMono" !important;
  @media (min-width: 425px) {
    font-size: 20px;
  }
  @media (min-width: 768px) {
    max-width: 654px;
  }
  .desktop {
    display: none;
    @media (min-width: 660px) {
      display: block;
    }
  }
  .mobile {
    display: block;
    @media (min-width: 660px) {
      display: none;
    }
  }
  h5 {
    text-align: center;
    margin: 0 0 24px 0;
    line-height: 28px;
    font-size: 18px;
    font-family: "JetBrainsMono" !important;
    color: var(--notfound-codeTitle);
    @media (min-width: 425px) {
      font-size: 20px;
    }
  }
  > div > p {
    counter-increment: section;
    margin: 0;
    color: var(--notfound-codeColor);
    line-height: 28px;
    font-size: 18px;
    font-family: "JetBrainsMono" !important;
    @media (min-width: 425px) {
      font-size: 20px;
    }
    &::before {
      content: counter(section);
      padding-right: 20px;
      color: var(--notfound-disabled);
    }
  }
  .token.maybe-class,
  .token.maybe-class-name,
  .token.known-class-name,
  .token.string,
  .token.atrule,
  .token.attr-value,
  .token.keyword {
    color: revert !important;
  }
  a {
    text-decoration: underline;
    transition: color 300ms ease-in-out;
    &:hover {
      text-decoration: underline;
      color: var(--notfound-primary);
    }
  }
}
